<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <!--    <footer th:include="include/common/common :: bootstrapResource"></footer>-->
    <footer th:include="include/common/common :: blueCSSResource"></footer>
    <footer th:include="include/common/common :: zTreeCSSSource"></footer>
    <footer th:include="include/common/common :: zTreeJSSource"></footer>

    <script>

        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'laytpl'] , function () {
            var layer = layui.layer
                ,element = layui.element
                ,admin = layui.admin
                ,$ = layui.jquery;

            element.render();

            let entityName = 'organization'               //声明当前页面容器前缀
                ,isSystem = [[${isSystem}]]
                ,_iframe = entityName + "_form"      //声明嵌套的form容器ID
                //定义menuTree的设置
                ,treeSetting = {
                    // 回调定义
                    callback:{
                        // 禁止tree折叠/展开:true 允许展开，false 禁止展开
                        beforeCollapse:true,
                        // 鼠标单击 回调
                        onClick:zTreeOnClick
                        //鼠标双击 回调
                        // onDblClick: zTreeOnDblClick
                    }
                }
                ,_treeId = entityName + 'Tree' , _searchBtnId = entityName + 'SearchBtn'
                ,_searchInputId = entityName + 'SearchInput' , _treeDataUrl = "/a/" + entityName + "/treeData"
                //定义menuTree的参数
                ,userTreeOptions = {
                    treeId:_treeId
                    ,searchBtnId: _searchBtnId
                    ,searchInputId:_searchInputId
                    ,setting:treeSetting
                    ,isExpandAll:true
                    ,url:_treeDataUrl
                };

            function loadTree(){
                $("#" + _iframe).empty();
                $.fn.zTree.destroy(userTreeOptions.treeId);
                $.fn.blueJs.zTreeTool.loadTree(userTreeOptions);
            };

            /**
             * 鼠标单击 回调
             * @param event
             * @param treeId
             * @param treeNode
             */
            function zTreeOnClick(event, treeId, treeNode) {
                let jsonData = {
                    id:treeNode.id,
                    code:treeNode.code,
                    showName:treeNode.name,
                    isNewRecord : false
                };
                active['btn'] && active['btn'].call(this , jsonData);
            };

            //声明tree鼠标单击回调事件的动作，layui 弹层
            let active = {
                btn:function(jsonData){
                    layer.open({
                        type: 0,
                        title : jsonData.showName,
                        btn : ['新增' , '编辑' , '删除' , '取消'],
                        yes : function (index) {
                            let i = "/a/" + entityName + "/form?isNewRecord=true&parent.id=" + jsonData.id , t = "菜单表单";
                            $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                            layer.close(index);
                        },
                        btn2 : function (index) {
                            if (jsonData.code == "0"){
                                layer.alert("系统节点，不允许修改");
                                return false;
                            }
                            let i = "/a/" + entityName + "/form?id=" + jsonData.id , t = "菜单表单";
                            $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                            layer.close(index);
                        },
                        btn3:function (index) {
                            let url = "/a/organization/delete";
                            $.ajax({
                                type:'post',
                                url : url,
                                data: jsonData,
                                dataType : 'text',
                                async : true,
                                success : function (data) {
                                    layer.confirm(data, function(index){
                                        layer.close(index);
                                        $.fn.blueJs.tools.refresh();
                                    });
                                }
                            });
                        },
                        btn4 : function (index) {
                            layer.close(index);
                        }
                    });

                }
            };


            $(document).ready(function(){
                $.fn.blueJs.tools.showIndex(true , entityName);
                loadTree();
            });

            //点击事件监听
            $(document).on('click' , function (event) {
                let targetId = event.target.id;
                if (targetId == entityName +'Refresh'){
                    $.fn.blueJs.tools.refresh();
                }
                if (targetId == entityName + 'Add'){
                    let i = "/a/" + entityName + "/form?isNewRecord=true&&parent.id=916c8c3ab23e427ab365d1db0231d347" , t = "组织表单";
                    $.fn.blueJs.tools.active['layerOpen'].call(this , i , t);
                }
                if (targetId == _searchBtnId || targetId == _searchInputId){
                    fuzzSearch(_treeId,'#' + _searchInputId,null,true); //初始化模糊搜索方法
                }
            });
        });


    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--        左侧tree-->
        <div class="layui-col-md2" id="organization-tree-index" style="display: none">
            <div class="layui-card">
                <div class="layui-card-header">
                    组织信息
                </div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <div class="layui-btn-group">
<!--                            <button class="layui-btn" id="organizationAdd">新增</button>-->
                            <button class="layui-btn" id="organizationRefresh">刷新</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <div class="form-group treeSearchInput" id="search" style="display: block">
                        <!--                <label for="searchInput">关键字：</label>-->
                        <input type="text" id="organizationSearchInput" maxlength="50" class="empty"/>
                        <button class="btn" id="organizationSearchBtn" >搜索</button>
                    </div>
                    <div id="organizationTree" class="ztree"></div>
                </div>
            </div>
        </div>
        <!--        右侧表单-->
        <div class="layui-col-md10" id="organization-panel">
            <div class="layui-card">
                <div class="layui-card-header">表单信息</div>
                <div class="layui-card-body" id="organization_form">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>